<!--
 * @Description:
 * @Author: charles
 * @Date: 2021-10-19 20:32:48
 * @LastEditors: charles
 * @LastEditTime: 2021-10-21 17:15:21
-->
<template>
  <div class="statistics">
    <!-- 第一行 -->
    <!-- <div class="box_1">
      <div class="box_info">
        <div class="title">总订单数</div>
        <div class="val">
          <span>{{ nums.order_nums }}</span>
          <span class="unit">个</span>
        </div>
      </div>
      <div class="box_info">
        <div class="title">活跃店铺数量</div>
        <div class="val">
          <span>{{ nums.shop_nums }}</span>
          <span class="unit">个</span>
        </div>
      </div>
      <div class="box_info">
        <div class="title">活跃超市数量</div>
        <div class="val">
          <span>{{ nums.market_nums }}</span>
          <span class="unit">个</span>
        </div>
      </div>
      <div class="box_info">
        <div class="title">本月新增订单</div>
        <div class="val">
          <span>{{ nums.order_current_nums }}</span>
          <span class="unit">个</span>
        </div>
      </div>
      <div class="box_info">
        <div class="title">本年新增订单</div>
        <div class="val">
          <span>{{ nums.order_nums - 2 }}</span>
          <span class="unit">个</span>
        </div>
      </div>
    </div> -->
    <div>
      <el-row style="margin-left: 0" :gutter="30">
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <div>
              <div style="float: left">
                <img
                  style="height: 50px; width: 50px"
                  src="@/assets/images/总订单.png"
                  alt=""
                />
              </div>
              <div style="float: left">
                <h4>总订单数</h4>
                <span>{{ nums.order_nums }} 个</span>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <div>
              <div style="float: left">
                <img
                  style="height: 50px; width: 50px"
                  src="@/assets/images/本月完成订单.png"
                  alt=""
                />
              </div>
              <div style="float: left">
                <h4>本月新增订单</h4>
                <span>{{ nums.order_current_nums }} 个</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <div>
              <div style="float: left">
                <img
                  style="height: 50px; width: 50px"
                  src="@/assets/images/本月完成订单.png"
                  alt=""
                />
              </div>
              <div style="float: left">
                <h4>本年新增订单</h4>
                <span>{{ nums.order_nums }} 个</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <div>
              <div style="float: left">
                <img
                  style="height: 50px; width: 50px"
                  src="@/assets/images/未派送订单.png"
                  alt=""
                />
              </div>
              <div style="float: left">
                <h4>未派送订单</h4>
                <span>{{ nums.order_nums - 13 }} 个</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 第二行 -->
    <div class="box_2">
      <div class="left">
        <C21></C21>
      </div>
      <div class="right">
        <div class="line">
          <C221></C221>
        </div>
        <div class="pies">
          <div><C222></C222></div>
          <div><C223></C223></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request";
import C21 from "./components/C21.vue";
import C221 from "./components/C221.vue";
import C222 from "./components/C222.vue";
import C223 from "./components/C223.vue";
// import C224 from "./components/C224.vue";
import {mapActions, mapState} from "vuex"
export default {
  components: {
    C21,
    C221,
    C222,
    C223,
    // C224,
  },
  data() {
    return {
      nums: {},
    };
  },
  computed:{
    ...mapState("order",["noorder"]),
  },
  mounted() {
    this.loadNums();
  },
  created() {
    // this.getNoOrder();
  },
  methods: {
    ...mapActions('order',["getOnOrders"]),
    getNoOrder(){
      let params = {
        page:1,
        pageSize:50,
        status:"未派送"
      }
      this.getOnOrders();
    },
    loadNums() {
      let url = "/statistics/nums";
      get(url).then((resp) => {
        this.nums = resp.data;
      });
    },

  },
};
</script>
<style lang="scss" scoped>
.statistics {
  // margin-top: 0.5em;
  .box_info {
    box-sizing: border-box;
    padding: 1em;
    color: #fff;
    .title {
      line-height: 3em;
      font-size: 18px;
      font-weight: bold;
    }
    .val {
      font-size: 14px;
      text-align: right;
    }
  }
  .box_1 {
    display: flex;
    margin-bottom: 1em;
    & > div {
      flex: 1;
      height: 120px;
      margin-right: 0.5em;
      background: lightblue;
    }
    & > div:nth-child(1) {
      background-color: #fdc660;
    }
    & > div:nth-child(2) {
      background-color: #fda065;
    }
    & > div:nth-child(3) {
      background-color: #f86b66;
    }
    & > div:nth-child(4) {
      background-color: #e6003b;
    }
    & > div:nth-child(5) {
      background-color: #8774f2;
    }
  }
  // 第二行
  .box_2 {
    display: flex;
    margin-top: 1em;
    margin-bottom: 1em;
    height: 400px;
    & > div {
      margin-right: 0.5em;
    }
    .left {
      flex: 2;
    }
    .right {
      flex: 3;
      display: flex;
      flex-direction: column;
      & > div {
        flex: 1;
      }
      .pies {
        display: flex;
        & > div {
          flex: 1;
          padding: 0.5em;
        }
      }
    }
  }
  // .box_3 {
  //   display: flex;
  //   & > div {
  //     flex:1;
  //     height: 120px;
  //     margin-right: .5em;
  //     background: lightblue;
  //   }
  //    & > div:nth-child(1){
  //     background-color: #58e0ad;
  //   }
  //   & > div:nth-child(2){
  //     background-color: #52bdc3;
  //   }
  //   & > div:nth-child(3){
  //     background-color: #51b6fe;
  //   }
  //   & > div:nth-child(4){
  //     background-color: #2e82f3;
  //   }
  //   & > div:nth-child(5){
  //     background-color: #3342b5;
  //   }
  // }
}
</style>
